<template>
  <div>
    <!-- 轮播图区域 --><mt-swipe :auto="4000">
      <mt-swipe-item></mt-swipe-item>
      <mt-swipe-item></mt-swipe-item>
      <mt-swipe-item></mt-swipe-item>
    </mt-swipe>

    <!-- <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in Pic" :key="item.url"
        ><img :src="item.img" alt=""
      /></mt-swipe-item>
    </mt-swipe> -->

    <ul class="mui-table-view mui-grid-view mui-grid-6 ">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newslist">
          <!-- <span class="mui-icon mui-icon-home"></span> -->
          <img src="../../images/menu1.png" alt="" srcset="" />
          <div class="mui-media-body">新闻资讯</div></router-link
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#"
          ><img src="../../images/menu2.png" alt="" srcset="" />
          <div class="mui-media-body">图片分享</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu3.png" alt="" srcset="" />
          <div class="mui-media-body">商品购买</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu4.png" alt="" srcset="" />
          <div class="mui-media-body">留言反馈</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu5.png" alt="" srcset="" />
          <div class="mui-media-body">视频专区</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu6.png" alt="" srcset="" />
          <div class="mui-media-body">联系我们</div></a
        >
      </li>
    </ul>
  </div>
</template>

<script>
// import { Toast } from 'mint-ui';
// export default {
//   data() {
//     return { Pic: [], ToastInstance: null };
//   },
//   created() {
//     this.getPic();
//   },
//   methods: {
//     getPic() {
//       // 获取轮播图
//       this.$http.get('http://#').then((result) => {
//         if (result.body.status === 0) {
//           this.Pic = result.body.message;
//         } else {
//           Toast('加载失败');
//         }
//       });
//     },
//   },
// };
</script>

<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
  .mint-swipe-item {
    &:nth-child(1) {
      background-image: url('../../images/dog.png');
    }
    &:nth-child(2) {
      background-image: url('../../images/cat.png');
    }
    &:nth-child(3) {
      background-image: url('../../images/monkey.png');
    }
  }
}
.mui-grid-view.mui-grid-6 {
  
   img {
    width: 60px;
    height: 60px;
  }
  .mui-media-body {
    font-size: 13px;
  }

}
</style>

//
<style lang="scss" scoped>
// .mint-swipe {
//   height: 200px;
//   .mint-swipe-item:first-child {
//     background-color: red;
//   }
//    .mint-swipe-item:last-child {
//     background-color: blue;
//   }
//    .mint-swipe-item:nth-child(2){
//     background-color: green;
//   }
// }
//
</style>
